<template>
    <div>
        <!-- 缓存组件状态：把当前组件内的操作状态保存下来。无论该组件是否被销毁，只要打开该组件，状态是保持的 -->

        <!-- keep-alive -->
        <button @click="showDom = 'A1'">A1</button>
        <button @click="showDom = 'A2'">A2</button>
        <keep-alive include exclude="A2">
            <A1 v-if="showDom === 'A1'"></A1>
            <A2 v-else></A2>
        </keep-alive>
    </div>
</template>
<script>
import A1 from './A1'
import A2 from './A2'
export default {
    components:{A1,A2},
    data(){
        return {
            showDom:'A1'
        }
    }
}
</script>